<template>
	<view class="my-shop-wp">
		<view style="background-color: #f7f8fa;width: 750rpx;">
			<u-tabs lineColor="#0170ef" lineWidth="64rpx" lineHeight="8rpx" activeStyle="color:#0170ef" ref="tabs"
				inactiveStyle="#4E5969" :list="tabsList" :current="current" @click="tabsClick"
				:scrollable="false"></u-tabs>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-show="swiperCurrent==0">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<goodsList ref="goodsList" :openId="userInfo.openId"></goodsList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" v-show="swiperCurrent==1">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<couponList ref="couponList"></couponList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" v-show="swiperCurrent==2">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<giftsList ref="giftsList"></giftsList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" v-show="swiperCurrent==3">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<pay-info :payInfo="payInfo" :hasPayInfo="hasPayInfo"></pay-info>
				</scroll-view>
			</swiper-item>


		</swiper>
		<view class="add" @click="addClick" v-show="swiperCurrent!==3">
			<img src="https://file.casugn.com/storecompcard//dnjQCUkRUXE760b1c113ff6a4615abf6c68cd2a58582_1681283943428.png"
				alt="">
		</view>

<!--		<shoptabbar :tabbarIndex="1"></shoptabbar>-->
	</view>
</template>

<script>
	// import shoptabbar from '@/pages/pagesMall/components/shoptabbar/shoptabbar.vue'
	import couponList from '@/pagesMall/components/couponList/couponList.vue'
	import giftsList from '@/pagesMall/components/giftsList/giftsList.vue'
	import goodsList from '@/pagesMall/components/goodsList/goodsList.vue'
	import payInfo from '@/pagesMall/components/payInfo/payInfo.vue'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	export default {
		components: {
			// shoptabbar,
			couponList,
			giftsList,
			goodsList,
			payInfo
		},
		data() {
			return {

				current: 0,
				tabsList: [{
						name: '商品'
					},
					{
						name: '代金券'
					},
					{
						name: '大礼包'
					},
					{
						name: '支付信息'
					}
				],
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				payInfo: {},
				hasPayInfo: false,
				openId: ''

			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onLoad() {

			console.log(this.openId, 'this.openId');
			this.checkPayInfo()
		},
		onShow() {
			switch (this.current) {
				case 0:
					this.$refs.goodsList.getList(1)
					break;
				case 1:
					this.$refs.couponList.getList(1)
					break;
				case 2:
					this.$refs.giftsList.getList(1)
					break;
				default:
					this.getPayInfo()
					break;
			}
		},
		methods: {
			tabsClick({
				index
			}) {
				this.current = index
				this.swiperCurrent = index
			},

			animationfinish({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current;
				this.current = current;
				console.log(current)
				switch (current) {
					case 0:
						this.$refs.goodsList.getList(1)
						break;
					case 1:
						this.$refs.couponList.getList(1)
						break;
					case 2:
						this.$refs.giftsList.getList(1)
						break;
					case 3:
						//查询支付信息
						this.getPayInfo()
						break;
					default:
						break;
				}
			},
			async getPayInfo() {
				const {
					openId
				} = this.userInfo
				let {
					openid
				} = uni.getStorageSync('openId')
				let res = await this.$api.getPayInfo({
					openId: openId ? openId : openid
				})
				if (res.success && res.code == 200) {
					console.log(this.payInfo, 'this.payInfo');
					this.payInfo = res.result
				}
			},
			async checkPayInfo() {
				const {
					openId
				} = this.userInfo
				if (openId) {
					let res = await this.$api.verifyExist({
						openId
					})
					if (res.success && res.code == 200) {
						this.hasPayInfo = res.result
					}
				}

			},
			reachBottom() {
				console.log('reachBottom');
				switch (this.swiperCurrent) {
					case 0:
						console.log('我的代金券', this.$refs.goodsList)
						this.$refs.goodsList.reachBottom()
					case 1:
						console.log('我的代金券')
						this.$refs.couponList.reachBottom()
						break;
					case 2:
						this.$refs.giftsList.reachBottom()
						break;
					case 3:
						console.log('我的支付信息')
						break;

				}
			},

			addClick() {
				if (!this.userInfo.id) {
					uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					})
					return
				}
				switch (this.swiperCurrent) {
					case 0:
						uni.navigateTo({
							url: `/pagesMall/myShop/myShopAddGoods`
						})
						break;
					case 1:
						uni.navigateTo({
							url: `/pagesMall/coupon/addCoupon`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pagesMall/mallCenter/addGifts`
						})
						break;
					case 3:
						break;
					default:
						break;
				}

			}
		},

	}
</script>

<style lang="scss" scoped>
	.my-shop-wp {
		background-color: #f7f8fa;
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;


		.swiper-box {
			flex: 1;
			padding-bottom: 20rpx;

			.swiper-item {
				height: 100%;


			}

		}

		.add {
			position: fixed;
			width: 112rpx;
			height: 112rpx;
			background: #276AEE;
			box-shadow: 0rpx 16rpx 32rpx 0rpx rgba(22, 63, 169, 0.4);
			text-align: center;
			border-radius: 50%;
			right: 32upx;
			bottom: 280upx;
			z-index: 50;

			img {
				width: 50upx;
				height: 50upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-25upx) translateY(-25upx);
			}
		}
	}
</style>
